<!-- 在线试读 -->
<template>
    <div class="read-page">
        <!-- 内容 -->
        <div class="read-con">
            <div class="chapter-con" ref="chapter" 
            :style="{columns:clWidth-32+'px',columnGap:16+'px',transform:'translateX(' + this.currentLocation + 'px' + ')',transitionDuration:'0.5s'}" 
            v-html="chapterCon">
            </div>
        </div>
        <!-- 其他 -->
        <div class="read-top clearfix">
            <i class="left" @click="$router.go(-1)"></i>
            <span class="right">{{book.bookName}}</span>
        </div>
        <div class="operate clearfix">
            <div class="last left" @click.stop="pageLast()"></div>
            <!--<div class="set-up left" @click.stop="toolShow=true"></div>-->
            <div class="next left" @click.stop="pageNext()"></div>
        </div>
        <div class="read-bottom">
            <span>左侧点击上一页</span>
            <i>{{pageNum}}/{{totalPages}}</i>
            <span>右侧点击下一页</span>
        </div>
        <!-- 设置工具栏 -->
        <!-- <div class="tool-mask" v-show="toolShow" @click.stop="toolShow=false">
            <transition name='slideup'>
                <div class="tool-box" v-show="toolShow">

                </div>
            </transition>
        </div>-->
        <Loading v-show="loadingShow" :loadingShow="loadingShow" :loadingText="loadingText"></Loading>
    </div>
</template>

<script>
import { axGet,axPost,axGetAwait } from '@/api/index'
import { imgLoad } from '@/assets/js/base'
import Loading from '@/components/LayerLoading'

export default {
    name: "readOnLine",
    components: { 
        Loading
    },
    data(){
        return{
            userid:this.$parent.myInfo.UserId,
            bookid:this.$route.query.bookid,  //书本id
            book:{}, 
            chapterNum:1,
            totalChapter:1,
            pageNum:1,
            totalPages:1,  
            chapterCon:'',
            lastChapter:'',
            nextChapter:'',
            clWidth: document.documentElement.clientWidth || document.body.clientWidth,
            currentLocation:0,
            toolShow:false,
            loadingShow:false,
            loadingText:'内容加载中',
        }
    },
    computed: {
    
    },
    watch:{
        toolShow(newVal,oldVal){
            if(newVal){
                touchFalse() 
            }else{
                touchTrue()
            }
        },
        chapterCon(newVal,oldVal){//章节改变时重新计算页数
            if(newVal){
                this.countPage()
            }
        },
    },
    async created(){ 
        this.$parent.menuShow=false;
        this.loadingShow=true
        this.book = JSON.parse(sessionStorage.getItem("thisBook")) 

        this.chapterCon = JSON.parse(sessionStorage.getItem("chapterCon")) 
        // this.chapterCon=await this.getChapter()
        
    },
    mounted(){
        // window.onresize = () => {
        //     return (() => {
        //         this.clWidth = document.body.clientWidth
        //         this.$router.go(0)
        //     })()
        // };
       
    },
    methods:{
        // 样式适应，计算页数
        countPage(){
            let imgArr=this.$refs.chapter.getElementsByTagName('img')
            let clientW = this.$refs.chapter.clientWidth
            let clientH = this.$refs.chapter.clientHeight
            
            if(imgArr.length>0){
                imgLoad(imgArr[0],()=>{
                    let imgW = imgArr[0].clientWidth
                    let imgH = imgArr[0].clientHeight
                    let isSmall = ((clientW/clientH) > (imgW/imgH))
                    for (let i = 0; i < imgArr.length; i++) { 
                        if(isSmall){
                            imgArr[i].style.height=100+'%'
                            imgArr[i].parentNode.style.textAlign='center'
                        }else{
                            imgArr[i].style.width=100+'%'
                            // imgArr[i].style.marginTop
                        }
                        imgArr[i].parentNode.style.width=100+'%'
                        imgArr[i].parentNode.style.height=100+'%'
                        imgArr[i].parentNode.style.overflowY='scroll'
                    }
                    imgLoad(imgArr[imgArr.length-1],()=>{
                        let scrollW = this.$refs.chapter.scrollWidth
                        this.totalPages = Math.floor(scrollW / (clientW+32))
                        this.loadingShow=false
                    })
                })
            }else{
                let scrollW = this.$refs.chapter.scrollWidth
                this.totalPages = Math.floor(scrollW / (clientW+32))
                this.loadingShow=false
            }
            
        },
        //章节请求
        async getChapter(){
            let chapter=await axGetAwait('GetHRBookInfo', {
                bookid: this.bookid,
            })
            return chapter.Value.bookDescribe
        },
        // 换章节
        changeChapter(){
            this.pageNum=1
            this.currentLocation=0
            
        },
        async pageLast(){
            if(this.pageNum>1){ //上一页
                this.pageNum--;
                this.currentLocation=this.currentLocation+this.clWidth-16
                if(this.pageNum == 2 && this.chapterNum>1){//第二页开始加载上一章
                    this.lastChapter = await this.getChapter()
                }
            }else if(this.pageNum==1 && this.chapterNum>1){ //上一章
                this.loadingShow=true
                this.chapterNum--; 
                this.pageNum=1
                this.currentLocation=0
                this.chapterCon = this.lastChapter
            }else{
                this.$LayerTip({
                    content:"已经是第一页了",
                    time:1500,
                });
            }
        },
        async pageNext(){
            if(this.pageNum < this.totalPages){ //下一页
                this.pageNum++;
                this.currentLocation=this.currentLocation-this.clWidth+16
                if(this.pageNum == this.totalPages-1 && this.chapterNum < this.totalChapter){//倒数第二页开始加载下一章
                    this.nextChapter = await this.getChapter()
                }
            }else if(this.pageNum == this.totalPages && this.chapterNum < this.totalChapter){ //下一章
                this.loadingShow=true
                this.chapterNum++; 
                this.pageNum=1
                this.currentLocation=0
                this.chapterCon = this.nextChapter
            }else{
                this.$LayerTip({
                    content:"已经是最后一页了",
                    time:1500,
                });
            }
        },

    }
}
</script>
<style type="text/css" scoped>
.read-page{
    height: 100%;
    box-sizing: border-box;
    padding: 1rem 16px;
    position: relative;
    overflow: hidden;
}
.read-con{
    height: 100%;
    /* width: 100%;
    overflow-x:hidden;  */
    
}
.chapter-con{
    height: 100%;
    color: #232b3b;
    font-size: 0.36rem;
    line-height: 0.6rem;
}
.operate{
    position: absolute;
    top: 0.9rem;
    left: 0;
    width: 100%;
    height: calc(100% - 0.9rem);
    z-index: 5;
}
.operate div{
    width: 50%;
    height: 100%;
}
.read-top{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0.28rem 16px 0;
    height: 0.9rem;
    font-size: 0.3rem;
    color: #7f7f7f;
    line-height: 0.56rem;
}
.read-top i{
    width: 0.56rem;
    height: 0.56rem;
    background: url(~@/assets/img/icon/return-r.png) no-repeat 0 0;
    background-size: 100%;
}
.read-bottom{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    height: 0.9rem;
    line-height: 0.9rem;
    font-size: 0.24rem;
    color: #b2b2b2;
    display:-webkit-box;  
	display:-webkit-flex; 
    display: flex;
    -webkit-justify-content: space-between;
	justify-content: space-between;
}
.read-bottom i{
    font-size: 0.26rem;
    color: #7f7f7f;
}
.tool-mask{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
.tool-box{
    background: rgba(0,0,0,.5);
    width: 100%;
    height: 3rem;
    position: absolute;
    bottom: 0;
    left: 0;
}
</style>